<template>
	<view class="lifeEvaluate">
		<NavBar title="">

		</NavBar>
		<image src="/static/img/index/127.png" mode="widthFix"></image>
		<view class="content">

			<view @tap="handeUpload" class="lifeEvaluate_top">
				<image src="/static/img/index/130.png" mode="widthFix"></image>
				添加视频/图
			</view>
			<view class="imageList">
				<view v-for="(item,index) in data.obj.attachmentIdList" :key="index">
					<image @tap="data.obj.attachmentIdList.splice(index,1)" src="/static/img/index/126.png"
						mode="widthFix"></image>
					<image @tap="previewImage(item)" v-if="!item.fileType"
						:src="data.httpUrl+'/app/file/viewFile?fileId='+item.fileId" mode="aspectFill"></image>
					<image v-else
						:src="data.httpUrl+'/app/file/viewFile?fileId='+item.fileId+'&process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast'"
						mode="aspectFill"></image>
					<view @tap="previewVideo(item)" v-if="item.fileType">
						<image src="/static/img/index/131.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="textarea">
				<textarea v-model="data.obj.content" placeholder="评价内容" placeholder-class="placeholderClass"></textarea>
			</view>
			<view class="score" v-if="!data.obj.reviewId">
				商品评价
				<view class="list">
					<image @tap="handeClick(index)" v-for="(item,index) in 5" :key="index"
						:src="data.obj.productScore>=index+1?'/static/img/index/129.png':'/static/img/index/128.png'"
						mode="widthFix"></image>
				</view>
			</view>
		</view>
		<PreviewVideo ref="previewVideoc" />
		<view class="bot" @tap="submit">
			发布
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import NavBar from '@/components/navBar.vue'
	import imgUpload from '@/utils/imgUpload.ts'
	import { reactive, ref } from 'vue';
	import PreviewVideo from '@/components/previewVideo'
	import { setDialogView } from '@/utils/dialogView.ts'
	import { commentsOrderProduct, storeReplyComments } from '@/utils/api/goods'
	const previewVideoc = ref()
	const data = reactive<any>({
		obj: { productScore: 0, attachmentIdList: [] },
		httpUrl: getApp().globalData.baseUrl,
	})
	onLoad(({ sonOrderNo, skuId, id, isHf }) => {
		if (isHf) {
			//商家回复
			data.obj.reviewId = id;
			uni.setNavigationBarTitle({
				title: '商家回复'
			})
		} else {
			// 买家评价
			data.obj.sonOrderNo = sonOrderNo;
			data.obj.skuId = skuId;
		}

	})
	const handeClick = (index) => {
		if (data.obj.productScore < index + 1) {
			data.obj.productScore = index + 1
		} else {
			data.obj.productScore = index;
		}
	}
	const submit = () => {
		// if(!data.obj.attachmentIdList.length){
		// 	uni.showToast({
		// 		title:'请上传评价文件',
		// 		icon:'none'
		// 	})
		// 	return;
		// }
		if (!data.obj.content) {
			uni.showToast({
				title: '请输入评价内容',
				icon: 'none'
			})
			return;
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		const b = data.obj.reviewId ? storeReplyComments : commentsOrderProduct;
		b({ data: { ...data.obj, attachmentIdList: data.obj.attachmentIdList.map(item => item.fileId) } }).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: '评价成功!',
					icon: 'none'
				})
				setTimeout(() => {
					uni.$emit('evaluationManagement', data.obj)
					uni.navigateBack();
				}, 1000)
			}
		})
	}
	const previewVideo = (item) => {
		previewVideoc.value.init(item.fileId)
	}
	const previewImage = (item) => {
		uni.previewImage({
			current: 1,
			urls: [data.httpUrl + '/app/file/viewFile?fileId=' + item.fileId],
			loop: true,
		})
	}
	const handeUpload = () => {
		uni.showActionSheet({
			itemList: ['图片', '视频'],
			success: (e) => {
				if (e.tapIndex == 0) {
					uni.showActionSheet({
						itemList: ['拍摄', '从相册选择'],
						success: (e) => {
							let key = ''
							if (e.tapIndex == 0) {
								key = 'camera'
							} else {
								key = 'album'
							}
							setDialogView(key == 'camera' ? 'CAMERA' : 'READ_EXTERNAL_STORAGE').then(res => {
								if (res == 1) {
									uni.chooseImage({
										sourceType: [key],
										success: (e : any) => {
											console.log(e.tempFiles.map((item : any) => { return { ...item, filePath: item.path } }))

											imgUpload(e.tempFiles.map((item : any) => { return { ...item, filePath: item.path } }), (e : any) => {
												e.map((item : any) => {
													data.obj.attachmentIdList.push({ fileId: item.fileId })
												});
											})

										}
									})
								}
							})

						}
					})

				} else {
					// tempFilePath
					uni.showActionSheet({
						itemList: ['拍摄', '从相册选择'],
						success: (e) => {
							let key = ''
							if (e.tapIndex == 0) {
								key = 'camera'
							} else {
								key = 'album'
							}
							setDialogView(key == 'camera' ? 'CAMERA' : 'READ_EXTERNAL_STORAGE').then(res => {
								if (res == 1) {
									uni.chooseVideo({
										sourceType: [key],
										success: (res) => {
											imgUpload([{ filePath: res.tempFilePath, fileType: 'video' }], (e : any) => {
												e.map((item : any) => {
													data.obj.attachmentIdList.push({ fileId: item.fileId, fileType: 'video' })
												});
												console.log(data.obj.attachmentIdList)
											})

										}
									})
								}
							})

						}
					})

				}

			}
		})
	}
</script>

<style lang="scss">
	.navBarTop {
		background: transparent !important;
	}

	.placeholderClass {
		color: #8C8C8C;
	}

	.textarea {
		padding: 24rpx;
		margin: 24rpx 0;
		border-radius: 24rpx;
		background: #fff;

		textarea {
			height: 368rpx;
			background: #F4F6FA;
			border-radius: 24rpx;
			padding: 24rpx;
			width: 100%;
		}
	}

	.lifeEvaluate {
		height: 100vh;
		background: #F4F6FA;
		display: flex;
		flex-direction: column;

		.score {
			display: flex;
			padding: 24rpx;
			border-radius: 24rpx;
			background: #fff;
			font-size: 32rpx;
			align-items: center;

			.list {
				flex: 1;
				margin-left: 24rpx;
				display: flex;

				image {
					margin-right: 10rpx;
					width: 48rpx;
				}
			}
		}

		.content {
			flex: 1;
			padding: 27rpx 24rpx;
			position: relative;
			z-index: 9;
		}

		.bot {
			line-height: 88rpx;
			text-align: center;
			border-radius: 88rpx;
			color: #fff;
			background: #6B64D3;
			margin: 0 24rpx;
		}

		>image {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;

		}

		.lifeEvaluate_top {
			height: 178rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			border-radius: 24rpx;
			flex-direction: column;
			color: #595959;

			image {
				width: 64rpx;
				margin-bottom: 10rpx;
			}
		}

		.imageList {
			display: flex;
			flex-wrap: wrap;

			>view {
				width: 164rpx;
				height: 164rpx;
				margin-right: 16rpx;
				margin-top: 24rpx;
				background: #ccc;
				border-radius: 24rpx;
				position: relative;

				view {
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 7;

					image {
						width: 40rpx;
					}
				}

				>image:nth-of-type(1) {
					width: 36rpx;
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					z-index: 8;
				}

				>image:nth-of-type(2) {
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
				}
			}

			view:nth-of-type(4n) {
				margin-right: 0;
			}
		}
	}
</style>